
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ecoride Map Service</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA08syTZoeZ59o8mbz_bIn7RToTc3ek_tkN63Cmss4ANHDSwWkQxSMFpq2CTKiFxH5glLsQRgZYw0UHQ"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;
    var arrLocation= new Array();

    
    function SourceDestination()
    {
        this.Source="";
	this.Destination="";
	}
  
  function initialize() {

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="San Francisco"
  arrLocation[arrLocation.length-1].Destination="Mountain View"

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="Los Angeles"
  arrLocation[arrLocation.length-1].Destination="San Diego"

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="Los Angeles"
  arrLocation[arrLocation.length-1].Destination="New York"

  var counter=0

      if (GBrowserIsCompatible()) {      
        
	map = new GMap2(document.getElementById("map_canvas"));

	while(counter<arrLocation.length)
	{

	var obj=document.createElement("div")
	
	var strID="div"+counter

	obj.id="div"+counter

        gdir = new GDirections(map, document.getElementById(strID));

        setDirections(arrLocation[counter].Source,arrLocation[counter].Destination,"en-US")	
	counter++
}

      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress);
    }		
    </script>

  </head>

  <body bgcolor="black" onload="initialize()" onunload="GUnload()">

  <h2><font color="green">Eco Ride</font></h2>
  
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right"><font color="green"> From:&nbsp;</font></th>

   <td><input type="text" size="25" id="fromAddress" name="from" value="San Francisco"/></td>
   
   <th align="right"><font color="green">&nbsp;&nbsp;To:&nbsp;</font></th>
   
   <td align="right"><input type="text" size="25" id="toAddress" name="to" value="Mountain View" /></td></tr>

   <tr>

   <td colspan="3">
   
   <input name="submit" type="submit" value="Get Directions!" />

   </td></tr>
   </table>
   
  </form>

    <br/>
    
    <table class="directions">
    <tr><th><font color="green">Map</font></th></tr>

    <tr><td valign="top" id="tdDirections"><div id="directions" style="width: 275px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    </table>
  </body>
</html>